<template>
	<div class="header">
		<div class="header-container">
			<div class="logo">
				<router-link v-show="UserInfo_data.status[0]!='7'" to="/index"><img src="../assets/img/logo.png" alt="">
				</router-link>
				<router-link v-show="UserInfo_data.status[0]==='7'" to="/"><img src="../assets/img/logo.png" alt="">
				</router-link>
			</div>
			<div class="nav">
				{{UserInfo_data.company_name}}
			</div>
			<div>
				<div class="header-right">
					<el-dropdown>
						<div>
							<img class="head" :src="UserInfo_data.head" />
							<span class="username">您好，{{UserInfo_data.name}}</span>
							<span class="sj"></span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="profile">个人资料</el-dropdown-item>
							<!-- <el-dropdown-item v-show="UserInfo_data.status[0]==='7'" @click.native="profile">个人资料</el-dropdown-item> -->
							<el-dropdown-item @click.native="Logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

				</div>
				<div class="phone">
					<span class="iconfont icon-shouji"></span>
					<span v-popover:popover1>手机版</span>
				<el-popover ref="popover1" placement="top-start"   trigger="hover">
					<div class="row" style="width: 100%;text-align: center;">
						<img class="codeimg" src="../assets/img/index/code-xcx2.png" />
						<p>自游驾小程序商户版</p>
					</div>
				</el-popover>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import Cookie from "../fetch/cookie.js"
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		name: 'Header',
		data() {
			return {}
		},
		computed: {
			...mapGetters([
				'UserInfo_data',
			])
		},
		methods: {
			...mapActions({
				setToken: 'setToken',
				getres_userrow: 'getres_userrow'
			}),
			profile() {
				this.$router.push('/UserSet/profile')
				this.getres_userrow(this.UserInfo_data)
			},
			Logout() {
				this.$cookies.remove("token");
				Cookie.Cookiedel("token")
				this.setToken("");
				this.$router.push('/loginIndex')
			}
		}
	}
</script>

<style scoped lang="less">
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.header {
		width: 100%;
		background: #0e8590;
		overflow: hidden;
	}

	.header-container {
		width: 1100px;
		height: 60px;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between
	}

	.logo {
		float: left;
	}

	.logo img {
		height: 54px;
		width: auto;
		margin-top: 3px;
	}

	.header-right {
		float: right;
		line-height: 60px;
		color: #fff;
	}

	.header-right img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 2px;
	}

	.header-right span {
		vertical-align: middle;
		color: #fff;
	}

	.sj {
		display: inline-block;
		width: 0px;
		height: 0px;
		border-width: 7px 7px 0 7px;
		border-style: solid;
		border-color: #fff transparent;
	}

	.nav {
		color: #fff;
		line-height: 60px;
		font-size: 20px;
	}


	.phone {
		float: right;
		margin-right: 40px;
		height: 60px;
		line-height: 60px;
		color: #fff;
		user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		cursor: pointer;
	}

	.phone span {
		vertical-align: middle;
	}

	.phone .icon-shouji {
		font-size: 26px;
	}

	// 	.header {
	// 		background: #333;
	// 
	// 		.head-main {
	// 
	// 			width: 1100px;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-between;
	// 			margin: auto;
	// 
	// 			.el-menu.el-menu--horizontal {
	// 				border: none;
	// 			}
	// 
	// 			.el-dropdown-link {
	// 				width: 100px;
	// 				display: flex;
	// 				justify-content: center;
	// 			}
	// 
	// 			.name {
	// 				width: 50px;
	// 				height: 100%;
	// 				color: #fff;
	// 				text-align: right;
	// 			}
	// 		}
	// 
	// 		.head {
	// 			width: 50px;
	// 			height: 50px;
	// 			border-radius: 50%;
	// 		}
	// 
	// 		li,
	// 		span {
	// 
	// 		div{
	// 			display: block;
	// 			width: 100%;
	// 			height: 100%;
	// 			padding: 0 20px
	// 		}
	// 			font-size: 16px;
	// 		}
	// 		.el-menu {
	// 			width: 950px;
	// 			margin: auto;
	// 			box-sizing: border-box;
	// 			font-size: 16px;
	// 
	// 		}
	// 		.el-menu-item{
	// 			padding: 0;
	// 			}
	// 		.el-menu-item.logo-box {
	// 			&:hover {
	// 				background: rgb(51, 51, 51) !important;
	// 			}
	// 		}
	// 
	// 		.logo {
	// 			width: 165px;
	// 			height: 53px
	// 		}
	// 	}
</style>
